let add_btn = document.querySelector('.add_btn')

let notes_list = JSON.parse(localStorage.getItem('notes')) || []

let notes_box = document.querySelector('.notes')

if (notes_list.length) {
  notes_list.forEach(el=>{
    createdNotes(el.disabled,el.content)
  })
}

add_btn.addEventListener('click', function () {
  createdNotes()
  getNotesList()
})

function getNotesList() {
  let notes = document.querySelectorAll('.notes_item')
  let list = []
  notes.forEach(el => {
    let textarea = el.lastElementChild.lastElementChild
    let disabled = textarea.getAttribute('disabled') == 'true' ? true : false
    let content = textarea.value
    list.push({ disabled, content })
  })

  notes_list = list 
  localStorage.setItem('notes',JSON.stringify(notes_list))
  return list
}


function createdEl(arr, tag_name = 'div') {
  let attrs = new Map([...arr])
  let el = document.createElement(tag_name)
  attrs.forEach((value, key) => {
    if (Array.isArray(value) && key == 'class') {
      value.forEach(v => {
        el.classList.add(v)
      })
    } else {
      el.setAttribute(key, value)
    }
  })
  return el
}

// 新建笔记
function createdNotes(disable = true, content = '') {
  let notes = createdEl([['class', ['notes_item', 'enter']]])
  setTimeout(() => {
    notes.classList.remove('enter')
  }, 1000);
  // 头部
  let notes_hd = createdEl([['class', 'notes_hd']])
  let edit = createdEl([['class', ['custom-icon', 'custom-icon-piliangxiugai', disable ? 'show' : 'hide' ,'edit']], ['title', '编辑']], 'i')
  let finish = createdEl([['class', ['custom-icon', 'custom-icon-wancheng', disable ? 'hide' : 'show' , 'finish']], ['title', '完成']], 'i')
  let copy = createdEl([['class', ['custom-icon', 'custom-icon-fuzhi', 'copy']], ['title', '复制']], 'i')
  let close = createdEl([['class', ['custom-icon', 'custom-icon-icon', 'close']], ['title', '删除']], 'i')
  let children = [edit, finish, copy, close]
  children.forEach(item => notes_hd.appendChild(item))
  notes.appendChild(notes_hd)
  // 身体
  let notes_body = createdEl([['class', 'notes_body']])
  let textarea = createdEl([['class', 'textarea']], 'textarea')
  textarea.value = content
  disable && textarea.setAttribute('disabled', disable)
  notes_body.appendChild(textarea)
  notes.appendChild(notes_body)
  edit.addEventListener('click', editNotes)
  finish.addEventListener('click', finishEdit)
  copy.addEventListener('click', copyContent)
  close.addEventListener('click', delNotes)

  notes_box.appendChild(notes)
  contentChange()

  return notes
}

// 内容发生改变
function contentChange() {
  let textarea_list = document.querySelectorAll('.textarea')
  textarea_list.forEach((el,index) => {
    el.addEventListener('input', function (e) {
      let content = el.value
      let disabled = false
      notes_list[index].content = content
      notes_list[index].disabled = disabled
      localStorage.setItem('notes',JSON.stringify(notes_list))
    })
  })


}

// 打开编辑状态
function editNotes() {
  let finish = findBrotherEl(this, 'finish')
  this.classList.add('hide')
  finish.classList.add('show')
  finish.classList.remove('hide')
  let notes_body = findBrotherEl(this.parentNode, 'notes_body')
  let textarea = notes_body.lastChild
  textarea.removeAttribute('disabled')
  textarea.focus()
  let notes = this.parentNode.parentNode
  notes.classList.add('shine')
  getNotesList()


}
// 保存笔记
function finishEdit() {
  let edit = findBrotherEl(this, 'edit')
  this.classList.add('hide')
  edit.classList.remove('hide')
  edit.classList.add('show')
  let notes_body = findBrotherEl(this.parentNode, 'notes_body')
  let textarea = notes_body.lastChild
  textarea.setAttribute('disabled', true)
  let notes = this.parentNode.parentNode
  notes.classList.remove('shine')
  getNotesList()

}

// 复制内容
function copyContent() {
  let notes_body = findBrotherEl(this.parentNode, 'notes_body')
  let text = notes_body.lastChild.value
  console.log(text);

  if (!navigator.clipboard) {
    let board = navigator.clipboard
    board.writeText(text).then(_ => {
      alert('复制成功!')
    }).catch(e => {
      alert('复制失败!')
    })
  } else {
    let textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    textarea.remove()
    alert('复制成功!')
  }
}

// 删除笔记
function delNotes() {
  let notes = this.parentNode.parentNode
  notes.classList.remove('shine')
  notes.classList.add('leave')
  setTimeout(() => {
    notes.remove()
    getNotesList()
  }, 1000);
}

// 查询兄弟元素
function findBrotherEl(e, class_name) {
  let notes = e.parentNode
  let brother = null
  notes.childNodes.forEach(el => {
    if (el.classList.contains(class_name)) {
      brother = el
    }
  })
  return brother
}

